<style>
	.login{
		margin-top: 17%;
		margin-right: 40%;
		margin-left: 40%;
	}
</style>
<template>
	<div class="login">
		<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
		<FormItem label="用户名称" prop="username">
			<Input type="text" v-model="formCustom.username" ></Input>
		</FormItem>
		<FormItem label="用户密码" prop="passwd">
			<Input type="password" v-model="formCustom.passwd"></Input>
		</FormItem>
		<FormItem>
			<Button type="primary" @click="handleSubmit('formCustom')">登录</Button>
			<Button @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
		</FormItem>
	</Form>
	</div>
</template>
<script>
	export default {
		data() {
			const validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入用户密码'));
				} else {
					callback();
				}
			};
			const validateUsername = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('请输入用户名称'));
				}
				// 模拟异步验证效果
				setTimeout(() => {
					if(value.length <= 4) {
							callback(new Error('用户名长度不小于4'));
						} else {
							callback();

					}
				}, 1000);
			};

			return {
				formCustom: {
					username: '',
					passwd: ''
				},
				ruleCustom: {
					username: [{
						validator: validateUsername,
						trigger: 'blur'
					}],
					passwd: [{
						validator: validatePass,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if(valid) {
						this.$Message.success('Success!');
					} else {
						this.$Message.error('Fail!');
					}
				})
			},
			handleReset(name) {
				this.$refs[name].resetFields();
			}
		}
	}
</script>